<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加习惯 - 习惯掌控</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #f6f8fa;
            color: #333;
        }

        .container {
            max-width: 414px;
            margin: 0 auto;
            background-color: white;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            padding: 50px 20px 20px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
        }

        .back-button {
            margin-right: 15px;
            font-size: 20px;
        }

        .title {
            font-size: 20px;
            font-weight: bold;
        }

        .form-container {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
            font-size: 16px;
        }

        .form-input {
            width: 100%;
            padding: 12px 15px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            outline: none;
        }

        .form-input:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
        }

        .form-help {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
        }

        .icon-select {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 10px;
        }

        .icon-option {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #4CAF50;
            background-color: #e8f5e9;
            border: 2px solid transparent;
            cursor: pointer;
        }

        .icon-option.selected {
            border-color: #4CAF50;
            background-color: #c8e6c9;
        }

        .frequency-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .frequency-option {
            padding: 10px 15px;
            border-radius: 20px;
            background-color: #f2f2f2;
            font-size: 14px;
            cursor: pointer;
        }

        .frequency-option.selected {
            background-color: #4CAF50;
            color: white;
        }

        .week-days {
            display: flex;
            gap: 5px;
            margin-top: 15px;
            justify-content: space-between;
        }

        .week-day {
            width: 40px;
            height: 40px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .week-day.selected {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }

        .time-picker {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .time-input {
            flex: 1;
            padding: 12px 15px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            outline: none;
        }

        .reminder-options {
            margin-top: 10px;
        }

        .reminder-option {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .reminder-radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }

        .reminder-radio.selected {
            border-color: #4CAF50;
        }

        .reminder-radio.selected:after {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #4CAF50;
        }

        .reminder-label {
            flex: 1;
        }

        .cue-options {
            margin-top: 10px;
        }

        .cue-option {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .cue-checkbox {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }

        .cue-checkbox.selected {
            border-color: #4CAF50;
            background-color: #4CAF50;
            color: white;
        }

        .cue-label {
            flex: 1;
        }

        .reward-input {
            width: 100%;
            padding: 12px 15px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            outline: none;
            height: 100px;
            resize: none;
        }

        .bottom-actions {
            padding: 20px;
            border-top: 1px solid #eee;
            display: flex;
            gap: 15px;
        }

        .action-button {
            flex: 1;
            padding: 15px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
        }

        .cancel-button {
            background-color: #f2f2f2;
            color: #666;
        }

        .save-button {
            background-color: #4CAF50;
            color: white;
        }

        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            margin-top: 20px;
        }

        .theory-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .theory-title {
            font-weight: bold;
            color: #4CAF50;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .theory-title i {
            margin-right: 8px;
        }

        .theory-text {
            font-size: 14px;
            line-height: 1.4;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="back-button">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="title">添加新习惯</div>
        </div>

        <div class="form-container">
            <div class="form-group">
                <label class="form-label">习惯名称</label>
                <input type="text" class="form-input" placeholder="例如：晨跑5公里">
            </div>

            <div class="form-group">
                <label class="form-label">选择图标</label>
                <div class="icon-select">
                    <div class="icon-option selected">
                        <i class="fas fa-running"></i>
                    </div>
                    <div class="icon-option">
                        <i class="fas fa-book"></i>
                    </div>
                    <div class="icon-option">
                        <i class="fas fa-water"></i>
                    </div>
                    <div class="icon-option">
                        <i class="fas fa-apple-alt"></i>
                    </div>
                    <div class="icon-option">
                        <i class="fas fa-moon"></i>
                    </div>
                    <div class="icon-option">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <div class="icon-option">
                        <i class="fas fa-pen"></i>
                    </div>
                    <div class="icon-option">
                        <i class="fas fa-meditate"></i>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">频率</label>
                <div class="frequency-options">
                    <div class="frequency-option selected">每天</div>
                    <div class="frequency-option">每周</div>
                    <div class="frequency-option">工作日</div>
                    <div class="frequency-option">周末</div>
                    <div class="frequency-option">自定义</div>
                </div>

                <div class="week-days">
                    <div class="week-day selected">一</div>
                    <div class="week-day selected">二</div>
                    <div class="week-day selected">三</div>
                    <div class="week-day selected">四</div>
                    <div class="week-day selected">五</div>
                    <div class="week-day">六</div>
                    <div class="week-day">日</div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">时间提醒</label>
                <div class="time-picker">
                    <input type="time" class="time-input" value="06:00">
                </div>
                <div class="form-help">选择您希望执行该习惯的时间</div>
            </div>

            <div class="theory-section">
                <div class="theory-title">
                    <i class="fas fa-lightbulb"></i>
                    习惯原理提示
                </div>
                <div class="theory-text">
                    根据《掌控习惯》的原理，最有效的习惯养成需要明确的环境暗示（何时何地）和行动计划（做什么）。例如："每天早上6点，我将在卧室穿好运动服，然后去公园跑步5公里。"
                </div>
            </div>

            <div class="section-title">四步习惯养成法</div>

            <div class="form-group">
                <label class="form-label">1. 明显的提示</label>
                <div class="cue-options">
                    <div class="cue-option">
                        <div class="cue-checkbox selected">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="cue-label">时间提示（设置闹钟/通知）</div>
                    </div>
                    <div class="cue-option">
                        <div class="cue-checkbox">
                        </div>
                        <div class="cue-label">地点提示（特定场所）</div>
                    </div>
                    <div class="cue-option">
                        <div class="cue-checkbox selected">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="cue-label">前导习惯（在某事之后）</div>
                    </div>
                    <div class="cue-option">
                        <div class="cue-checkbox">
                        </div>
                        <div class="cue-label">情绪状态（特定心情时）</div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">2. 强烈的渴望</label>
                <textarea class="reward-input" placeholder="我想通过这个习惯获得什么？例如：保持健康、提高体能..."></textarea>
            </div>

            <div class="form-group">
                <label class="form-label">3. 简单的行动</label>
                <textarea class="reward-input" placeholder="如何让这个习惯更简单？例如：提前准备好运动服和运动鞋..."></textarea>
            </div>

            <div class="form-group">
                <label class="form-label">4. 满意的奖励</label>
                <textarea class="reward-input" placeholder="完成习惯后如何奖励自己？例如：记录成就、享受一杯喜欢的饮料..."></textarea>
            </div>
        </div>

        <div class="bottom-actions">
            <div class="action-button cancel-button">取消</div>
            <div class="action-button save-button">保存</div>
        </div>
    </div>
</body>

</html>